<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人信息表</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
	form{
		width: 50%;
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
	}.avatar-container {
		text-align: center; /* 使头像和上传按钮居中 */
		margin-top: 50px;
    }.avatar {
		width: 150px; /* 设置头像的宽度 */
		height: 150px; /* 设置头像的高度 */
		border-radius: 50%; /* 设置头像为圆形 */
		margin-bottom: 20px; /* 添加一些间距 */
	}
</style>
</head>
<body>
	
	<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
	<div id="app">
	  <div class="avatar-container">
	      <img :src="img" alt="默认头像" class="avatar" id="avatar-preview">
	      <label for="avatar-input" class="layui-btn">设备图片</label>
	      <input type="file" id="avatar-input" accept="image/*" style="display:none;" @change="onAvatarChange">
	  </div>
	  <div class="layui-form-item">
		<label class="layui-form-label">设备名字</label>
		<div class="layui-input-block">
		  <input type="text" v-model="name" placeholder="请输入" autocomplete="off" class="layui-input">
		</div>
	  </div>
	  
	  
	  
	  
	  
	  
	  
	  
	  <div class="layui-form-item">
	      <label class="layui-form-label">设备状态：</label>
	      <div class="layui-input-block">
	          <input type="radio" v-model="state" name="stateGroup" value="0" title="未激活">
	          <input type="radio" v-model="state" name="stateGroup" value="1" title="已激活">
	          <input type="radio" v-model="state" name="stateGroup" value="2" title="离线">
	          <input type="radio" v-model="state" name="stateGroup" value="3" title="在线">
	      </div>
	  </div>
	  
	  <div class="layui-form-item">
	      <label class="layui-form-label">设备控制：</label>
	      <div class="layui-input-block">
	          <input type="radio" v-model="control" name="controlGroup" value="0" title="开">
	          <input type="radio" v-model="control" name="controlGroup" value="1" title="关">
	      </div>
	  </div>








	  <div class="layui-form-item">
	  		<label class="layui-form-label">设备类型</label>
	  		<div class="layui-input-block">
	  		  <input type="text" v-model="typeId" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">所在场馆</label>
	  		<div class="layui-input-block">
	  		  <input type="text" v-model="stadiumId" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item layui-form-text">
		<label class="layui-form-label">设备描述</label>
		<div class="layui-input-block">
		  <textarea v-model="description" placeholder="请输入内容" class="layui-textarea"></textarea>
		</div>
	  </div>
	  <div class="layui-form-item">
		<div class="layui-input-block">
		  <button type="button" @click="doDeviceInsert" class="layui-btn" lay-submit lay-filter="*" >提交添加</button>
		</div>
	  </div>
	</div>
	</form>
	
	
	<script src="layui/layui.js"></script>
	<script>
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //各种基于事件的操作，下面会有进一步介绍
	});
	</script>
	<script>
	        // 获取上传头像的input元素和头像预览的img元素
	        const avatarInput = document.getElementById('avatar-input');
	        const avatarPreview = document.getElementById('avatar-preview');
	
	        // 监听input元素的change事件
	        avatarInput.addEventListener('change', function(event) {
	            // 获取选中的文件
	            const file = event.target.files[0];
	            // 创建一个FileReader对象
	            const reader = new FileReader();
	            // 读取文件内容
	            reader.readAsDataURL(file);
	            // 监听FileReader对象的load事件
	            reader.addEventListener('load', function() {
	                // 将读取到的文件内容设置为头像预览的src属性
	                avatarPreview.src = reader.result;
	            });
	        });
	    </script>
		
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" ></script>
	<script type="text/javascript">
	let vm = new Vue({
	    el: "#app",
	    data: {
	        name: "",
	        img: "imgs/default1.png",
	        state: null, // 记录状态
	        control: null, // 记录控制
	        description: "请您给出描述",
	        stadiumId: null,  // 初始值设为 null
	        typeId: null      // 初始值设为 null
	    },
	
	    methods: {
			// 头像改变时的处理函数
			onAvatarChange(event) {
			  const file = event.target.files[0];
			  if (file) {
				this.img = URL.createObjectURL(file); // 创建一个本地URL并更新img属性
			  }
			},
	        doDeviceInsert() {
	            let url = "http://localhost:8080/device/insert";
	            let params = {
	                deviceName: this.name,
	                deviceImg: this.img,
	                deviceState: this.state !== null ? parseInt(this.state) || 0 : 0,  
	                deviceControl: this.control !== null ? parseInt(this.control) || 0 : 0,

	                deviceDescription: this.description,
	                stadiumId: this.stadiumId || 1,  // 如果为空，默认为 1
	                deviceTypeId: this.typeId || 1     // 如果为空，默认为 1
	            };
	
	            console.log(params); // 检查发送的数据
	            $.get(url, params, res => {
	                if (res.code == 200) {
	                    alert("已添加该设备！");
	                } else if (res.code == 500) {
	                    alert("操作有误，请检查您输入的信息");
	                }
	            }, "JSON");
	        }
	    }
	});


	</script>

</body>
</html>
